﻿@page
@model WebApp.Pages.GameIndexModel
@{
}
 <div id="app">
 {{ userName }}
 {{message}}
 </div>
@section Scripts{
        <script type="importmap">
        {
          "imports": {
            "vue": "./lib/vue/vue.esm-browser.js"
          }
        }
    </script>
    <script src="lib/microsoft-signalr/signalr.min.js"></script>
    <script>
        var userName = "@User.Identity?.Name";
        var signalurl="/singlegamehub"
    </script>
    <script type="module">
        import { createApp } from 'vue'
const myapp = {
    created() {
        var me = this;
        if (me.userName) {
            me.message = "";
            me.connection = new signalR.HubConnectionBuilder().withUrl(signalurl).withAutomaticReconnect()
                .build();

            me.connection.Error += ex => {
                Console.WriteLine("Error: {0}", ex.Message);
                me.message = ex.Message;
            }
            me.connection.on("PlayerExist", function() {
                me.message = "获取游戏列表......";
                me.connection.invoke("GetGames", me.userName);
            });
            me.connection.on("PlayerNotExist", function(userName) {
                me.message = "创建玩家......";
                me.connection.invoke("AddPlayer", userName, userName);
            });

            me.connection.on("PlayerAdded", function() {
                me.message = "获取游戏列表......";
                me.connection.invoke("GetGames", me.userName);
            });
            me.connection.on("RefreshGames", function() {
                me.message = "获取游戏列表......";
                me.connection.invoke("GetGames", me.userName);
            });
            me.connection.on("ShowGames", function(games) {
                me.message = "数据获取完成";
                me.ShowGames(games);
            });
            me.connection.on("EnterGame", function(gameid) {
                me.playGame(gameid);
            });
            me.connection.on("Error", function(message) {
                me.message = message;
            });
            function start() {
                me.connection.start().then(function() {
                    me.message = "检查玩家是否存在......"
                    me.connection.invoke("CheckUser", me.userName).catch(function(err) {
                        me.message = "发生错误：" + err.toString() + "，请重新登录。";

                    });
                }).catch(function(err) {
                    me.message = err.toString();
                    return console.error(err.toString());
                });
            }

            start();

            me.connection.onclose(() => {
                start();
            });
        } else {
            me.message = "没有登录";
        }
    },
    data() {
        return {
            message: "正在加载......",
            connection: null,
            games: [],
            userName: "@User.Identity?.Name",
            playing: false
        }
    }
}
   const app = createApp(myapp)
        app.mount('#app')
    </script>
}